<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();

import Client from "../../../req/common.js";
import Utils from "../../../req/Utils.js";

const currentData = ref<any>({
  count: 0,
  num: 0,
  showBool: false
});

const toSend = () => {
  router.push("sendOrder");
};
const countPrice = () => {
  let result = Utils.countCart();
  currentData.value.count = result.money;
  currentData.value.num = result.number;
};
const isShow = () => {
  let cartStore = Client.getSession("cart");
  if(cartStore && cartStore.length>0) {
    currentData.value.showBool = true;
    return;
  }
  currentData.value.showBool = false;
};

watch(
  () => store.state.changeCart,
  (newVal, oldVal) => {
    isShow();
    countPrice();
  }
);

isShow();
countPrice();
</script>

<template>
  <section class="cartUtil" v-show="currentData.showBool">
    <div class="content">
      <div class="select"><i :class="{'active': true}"></i><span>全选</span></div>
      <div class="money">
        <div class="count">总计：<span class="red">¥{{currentData.count}}</span></div>
        <!-- <div class="desc">总额¥0.00 立减¥0.00</div> -->
      </div>
    </div>
    <div class="buy">
      <span class="text" @click="toSend">去结算</span>
      <span class="num">({{currentData.num}}件)</span>
    </div>
  </section>
</template>

<style lang="less" scoped>
.cartUtil {
  width: 3.75rem;
  height: .5rem;
  background: white;
  position: relative;
  display: flex;
  &::after {
    width: 3.75rem;
    height: 0rem;
    content: "";
    position: absolute;
    border-top: .01rem solid #ddd;
    top: 0;
    left: 0;
  }
  .content {
    flex: 1;
    padding: .05rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select {
      width: .4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      i {
        width: .2rem;
        height: .2rem;
        background: url("../../../assets/images/select-icon-1.png")no-repeat center;
        background-size: cover !important;
        margin-bottom: .06rem;
        &.active {
          background: url("../../../assets/images/select-icon-2.png")no-repeat center;
        }
      }
      span {
        width: .4rem;
        font-size: .1rem;
        text-align: center;
        color: #999;
      }
    }
    .money {
      padding-right: .08rem;
      .count {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: .04rem;
        .red {
          color: #e93b3d;
          font-family: arial;
        }
      }
      .desc {
        font-size: 10px;
        color: #999;
        font-family: arial;
        font-weight: 400;
      }
    }
  }
  .buy {
    width: 1.1rem;
    height: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4393c;
    color: white;
    .text {
      font-size: .16rem;
      font-weight: 700;
    }
    .num {
      font-size: .12rem;
      line-height: .5rem;
    }
  }
}
</style>

